Fixes #577

Problem

Tag spacing breaks when using fonts other than the default monospace font. The current implementation uses hardcoded negative margins (-me-3.5, -me-5) on the IconHash component, which are calibrated specifically for the default font. When users change fonts, the spacing breaks (as reported in #577).

Solution

Replace the negative margin approach with flexbox layout, matching the pattern already used by other icon+text components in AstroPaper:

• Datetime component: Uses flex items-center gap-x-2
• EditPost component: Uses flex gap-1.5
• BackButton component: Uses flex

This makes Tag consistent with the rest of the codebase.

Changes

- <li class="group inline-block group-hover:cursor-pointer">
+ <li class="group group-hover:cursor-pointer">
    <a
-     class="relative pe-2 text-lg ..."
+     class="flex items-center gap-x-1.5 text-lg ..."
    >
      <IconHash
-       class="inline-block opacity-80"
-       { "-me-3.5 size-4": size === "sm" },
-       { "-me-5 size-6": size === "lg" },
+       class="opacity-80"
+       { "size-4": size === "sm" },
+       { "size-6": size === "lg" },
      />
-     &nbsp;<span>{tagName}</span>
+     <span>{tagName}</span>
    </a>
</li>

Benefits

✅ Works with any font - Not calibrated to specific font metrics
✅ Follows AstroPaper patterns - Matches Datetime, EditPost, BackButton components
✅ Standard Tailwind CSS - Uses flex + gap, no magic numbers
✅ Self-adjusting - Spacing adapts automatically to font changes
✅ Cleaner code - Removes fragile negative margin approach

Testing

• Tested with default font (works as before)
• Tested with sans-serif font (fixes the spacing issue)
• Build successful
• No visual regression for users on default font

Related

As mentioned in #577 comment by @eerison: "I saw the same issue, when I used a different font."